<!-- 用户管理 -->
<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="交易类型" prop="transactionType">
          <enum-select
            v-model="queryParams.transactionType"
            placeholder="交易类型"
            :enums="TRANSACTION_TYPE_ENUM"
            :clearable="true"
          ></enum-select>
        </el-form-item>
        <el-form-item label="积分来源" prop="bizType">
          <el-select v-model="queryParams.bizType" placeholder="请选择" style="width: 200px">
            <el-option
              v-for="item in sourceList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="交易时间">
          <el-date-picker
            v-model="tempTime"
            :editable="false"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="截止时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleChange"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="onSearch">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="always">
      积分余额：
      <span v-loading="balanceLoading" class="text-red-500">{{ balanceTotal }}</span>
    </el-card>
    <el-card shadow="never" class="flex flex-col h-full" body-style="height: calc(100% - 0px);">
      <BasePageTable
        class="h-full"
        :tableColumnsData="columns"
        :pageSize="queryParams.pageSize"
        :tableData="pageData"
        :total="total"
        :loading="loading"
        @handleQuery="changePage"
      >
        <template #transactionType="{ row }">
          <span v-if="row.points > 0">增加</span>
          <span v-else>消耗</span>
        </template>
        <template #points="{ row }">
          <span v-if="row.points > 0">+</span>
          {{ row.points }}
        </template>
      </BasePageTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import BasePageTable from "@/components/BasePageTable/index.vue";
import billsAPI, { BillsQuery, CoinsBillVO } from "@/api/coins/bills-api";
import { TRANSACTION_TYPE_ENUM } from "@/enums/conins/CoinBills";
import EnumSelect from "@/components/EnumSelect/index.vue";
import { useBalance } from "@/hooks/useBalance";
const { balanceTotal, quotasTotal, loading: balanceLoading } = useBalance();

const columns = ref<any[]>([
  {
    label: "交易类型",
    prop: "transactionType",
    align: "center",
    showOverflowTooltip: true,
    customSlot: "transactionType",
  },
  {
    label: "积分来源/用途",
    prop: "bizTypeName",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "积分变化值",
    prop: "points",
    align: "center",
    showOverflowTooltip: true,
    customSlot: "points",
  },
  // {
  //   label: "额度变化",
  //   prop: "points",
  //   align: "center",
  //   showOverflowTooltip: true,
  //   customSlot: "points",
  // },
  {
    label: "交易时间",
    prop: "operatorTime",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "描述",
    prop: "description",
    align: "center",
    width: "300",
    showOverflowTooltip: true,
  },
]);
const queryFormRef = ref();
const tempTime = ref();
const sourceList = ref();
const queryParams = reactive<BillsQuery>({
  pageNum: 1,
  pageSize: 20,
  bizType: "",
  beginTime: "",
  endTime: "",
  transactionType: "",
});

const pageData = ref<CoinsBillVO[]>([]);
const total = ref(0);
const loading = ref(false);

function onSearch() {
  queryParams.pageNum = 1;
  handleQuery();
}

// 查询
async function handleQuery() {
  try {
    loading.value = true;
    const res: any = await billsAPI.getPage(queryParams);
    pageData.value = res.data;
    total.value = res.total;
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false;
  }
}
function changePage(val: any) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  handleQuery();
}

// 重置查询
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  queryParams.beginTime = "";
  queryParams.endTime = "";
  tempTime.value = "";
  queryParams.transactionType = "";
  queryParams.bizType = "";
  handleQuery();
}

function handleChange(val: any) {
  if (val) {
    const [startTime, endTime] = val;
    queryParams.beginTime = startTime || "";
    queryParams.endTime = endTime || "";
  } else {
    queryParams.beginTime = "";
    queryParams.endTime = "";
  }
}
async function getSource() {
  try {
    const res: any = await billsAPI.getSource();
    sourceList.value = res.data;
  } catch (e) {
    console.log(e);
  }
}
onMounted(() => {
  handleQuery();
  getSource();
});
</script>
